<template>
	<div class="ui-box" :class="{'ui-box-solid': solid, 'ui-box-radius': radius}">
		<div v-if="closeable" class="ui-box-close" @click="handleClose">
			<Icon type="md-close-circle" :size="16" color="#1ba2fc" />
		</div>
		<slot></slot>
	</div>
</template>

<script>
export default {
	name: 'uiBox',
	props: {
		solid: {
			type: Boolean,
			default: false
		},
		radius: {
			type: Boolean,
			default: true
		},
		closeable: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		handleClose() {
			this.$emit('on-close');
		}
	}
}
</script>

<style>
.ui-box {
	position: relative;
	margin-bottom: 20px;
	padding: 15px 20px;
	border: 1px dashed #dcdee2;
	background-color: #fafafa;
}
.ui-box.ui-box-radius {
	border-radius: 5px;
}
.ui-box.ui-box-solid {
	border-style: solid;
}
.ui-box .ui-box-close {
	position: absolute;
	right: -8px;
	top: -8px;
	width: 16px;
	height: 16px;
	line-height: 16px;
	border-radius: 50%;
	background-color: #fff;
	overflow: hidden;
	cursor: pointer;
}
</style>